<!-- 右上窗体按钮 -->
<template>
<el-header id="baseFrame" class="flex flex-pack-justify flex-align-center">
  <p class="title">皮卡猪词典</p>
  <div class="flex flex-align-center">
    <div class="flex flex-align-center" @click="openLoginWindow">
      <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
      <p class="login-text">未登录</p>
      <i class="el-icon-caret-bottom"></i>
    </div>
    <i class="el-icon-minus" @click="minWindow"></i>
    <i class="el-icon-copy-document" @click="maxWindow"></i>
    <i class="el-icon-close" @click="closeWindow"></i>
  </div>
</el-header>
</template>

<script>
import { ipcRenderer, remote } from 'electron'
export default {
  name: 'BaseFrame',
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    // 打开登录窗体
    openLoginWindow () {
      ipcRenderer.send('openLoginPageWindow')
    },
    // 最小化窗体
    minWindow () {
      ipcRenderer.send('minWindow')
    },
    // 最大化窗体
    maxWindow () {
      let window = remote.getCurrentWindow()
      if (!window.isFullScreen()) {
        window.setFullScreen(true)
      } else {
        window.setFullScreen(false)
      }
    },
    closeWindow () {
      ipcRenderer.send('closeWindow')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/variable.scss';
#baseFrame {
  width: 100%;
  font-size: $font15;
  background: $baseColor;
  height: 50px;
  color: $f7Gray;
  .login-text {
    font-size: $font12;
    margin-left: 5px;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }
  i {
    margin: 0 10px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    color: $f7Gray;
  }
  p:hover, i:hover {
    color: #ffffff;
  }
}
</style>